import React, { PureComponent } from 'react'

import { connect } from 'react-redux'

import { fetchMultidataAsyncAction } from '../store-split-simple/actionCreators'


class ReduxSagaAxios extends PureComponent {
  componentDidMount() {
    this.props.multidata()
  }
  // 请求的数据在AboutConnectReactRedux中展示
  render() {
    return (
      <div>
        <h2>redux-saga实现在redux中异步操作</h2>
        <ul>
          {
            this.props.banners.map((row, index) => (
              <li key={row.id}>{row.name}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  banners: state.fetchDataInfo.banners,
  recommend: state.fetchDataInfo.recommend
})

const mapDispatchToProps = (dispatch) => ({
  multidata: () => dispatch(fetchMultidataAsyncAction())
})

export default connect(mapStateToProps, mapDispatchToProps)(ReduxSagaAxios)
